<!--
*******************************************************************************
 * Copyright © 2021-2022 VMware, Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License. You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under the License
 * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 *
 * @author: Huaqiao Zhang, <huaqiaoz@vmware.com>
 *******************************************************************************
 -->

<div class="card">
    <div class="card-header">
        <i class="fa fa-list text-danger mr-2"></i> 
        <span>System Services List</span>
    </div>
    <div class="card-body p-0">
        <div class="bg-light px-3 py-2">
            <button *ngIf="operationBtnDisabled" class="btn btn-primary" type="button" disabled>
                <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
                Loading...
              </button>
            <button *ngIf="!operationBtnDisabled" class="btn btn-primary btn-sm " [disabled]="operationBtnDisabled" (click)="refresh()">
                <span><i class="fa fa-refresh mr-1"></i>Refresh</span> 
            </button>
        </div>
        <div class="table-responsive">
            <table class="table table-hover text-truncate">
                <thead class="thead-light">
                    <tr>
                      <th scope="col">Name</th>
                      <th scope="col">State</th>
                      <th scope="col">Metric</th>
                      <th scope="col">Config</th>
                      <th scope="col">Operation</th>
                    </tr>
                </thead>
                <tbody>
                <tr *ngFor="let s of availServices">
                    <td>{{s.name}}</td>
                    <td [ngSwitch]="s.alive">
                        <span *ngSwitchCase="true" class="badge badge-success">running</span>
                        <span *ngSwitchDefault  class="badge badge-danger">stopped</span>
                    </td>
                    <td [ngSwitch]="s.alive">
                        <a *ngSwitchCase="true" [routerLink]="['../metric']" [queryParams]="{svcName: s.name}"><i class="fa fa-area-chart"></i></a>
                        <a *ngSwitchDefault>
                            <i class="fa fa-ban fa-stack-lg text-danger"></i>
                        </a>
                    </td>
                    <td [ngSwitch]="s.alive">
                        <a *ngSwitchCase="true" [routerLink]="['../config']" [queryParams]="{svcName: s.name}"> <i class="fa fa-file-text"></i> </a>
                        <a *ngSwitchDefault>
                            <i class="fa fa-ban fa-stack-lg text-danger"></i>
                        </a>
                    </td>
                    <td>
                        <span *ngIf="!operationBtnDisabled; else LoadingTemplate">
                            <span class="badge badge-info mr-1"  role="button" (click)="start(s.name)">start</span>
                            <span class="badge badge-warning mr-1"  role="button" (click)="restart(s.name)">restart</span>
                            <span class="badge badge-danger" role="button" (click)="stop(s.name)">stop</span>
                        </span>
                        <ng-template #LoadingTemplate>
                            <div class="spinner-grow spinner-grow-sm text-info mr-1" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <div class="spinner-grow spinner-grow-sm text-warning mr-1" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <div class="spinner-grow spinner-grow-sm text-danger" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </ng-template>
                    </td>
                </tr>
                </tbody>
            </table>
          </div>
    </div>
  </div>